import { createFileRoute, Link } from '@tanstack/react-router'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { ApiTest } from '@/components/ApiTest'

export const Route = createFileRoute('/')({
  component: Index,
})

function Index() {
  return (
    <div className="container mx-auto py-12 px-4">
      <div className="text-center mb-12">
        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
          欢迎来到惠办好
        </h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
          高效、智能的企业管理解决方案
        </p>
        <Link to="/login">
          <Button size="lg" className="px-8 py-3">
            开始使用
          </Button>
        </Link>
      </div>

      <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
        <Card>
          <CardHeader>
            <CardTitle>智能办公</CardTitle>
            <CardDescription>
              提升工作效率，简化办公流程
            </CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              集成多种办公工具，让您的工作更加高效便捷。
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>数据分析</CardTitle>
            <CardDescription>
              深入洞察业务数据，做出明智决策
            </CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              实时数据监控和分析，帮助您更好地了解业务状况。
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>团队协作</CardTitle>
            <CardDescription>
              促进团队沟通，提高协作效率
            </CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              强大的团队协作功能，让团队成员紧密配合。
            </p>
          </CardContent>
        </Card>
      </div>

      {/* API测试组件 - 仅在开发环境显示 */}
      {import.meta.env.DEV && <ApiTest />}
    </div>
  )
}
